<template>
  <div class="app-container">
    <div id="container" style="width: 100%; height: 680px;">
    </div>
    <div class="input-card" style='width: 24rem;'>
      <div class="input-item" >
        <input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>
      </div>
      <div class="input-item">
        <input id="clear" type="button" class="btn" value="清除" @click="clean"/>
        <input id="close" type="button" class="btn" value="关闭绘图" @click="close"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, reactive } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const  map = ref(undefined);
const mouseTool=ref(undefined)

const data = reactive({
  form: {},
  overlays: []
});
let AMapInstance = null;
// 新增标志位，表示地图是否初始化完成
const isMapInitialized = ref(false);

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "「11fa46171b5a476ff40581ce7737421d」",
  };
  AMapLoader.load({
    key: "7f8922a33480e520cc450d7ffa3efb8e",
    version: "2.0",
    plugins: ["AMap.Scale", "AMap.MouseTool", "AMap.PolygonEditor"],
  }).then((AMap) => {
        AMapInstance = AMap;
        map.value = new AMap.Map("container", {
          viewMode: "3D",
          zoom: 11,
          center: [113.625423, 34.746652]
        });
        mouseTool.value = new AMap.MouseTool(map.value);
        mouseTool.value.on('draw', function(e) {
          // console.log(1111)
          // console.log(e)
          // console.log(e.obj)
          // console.log(e.obj._position)
          data.overlays.push(e.obj);
        });
        // 地图初始化完成，设置标志位为 true
        isMapInitialized.value = true;
        // 初始化完成后手动触发一次绘制
        draw('marker');
      })
      .catch((e) => {
        console.log(e);
      });
});

function draw(type) {
  if (!isMapInitialized.value) {
    console.log('地图还未初始化完成，请稍候再试');
    return;
  }
  switch (type) {
    case 'marker': {
      mouseTool.value.marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        offset: new AMapInstance.Pixel(-20, -36)
      });
      break;
    }
    case 'polyline': {
      mouseTool.polyline({
        strokeColor: '#80d8ff'
      });
      break;
    }
    case 'polygon': {
      mouseTool.polygon({
        fillColor: '#00b0ff',
        strokeColor: '#80d8ff'
      });
      break;
    }
    case 'rectangle': {
      mouseTool.rectangle({
        fillColor: '#00b0ff',
        strokeColor: '#80d8ff'
      });
      break;
    }
    case 'circle': {
      mouseTool.circle({
        fillColor: '#00b0ff',
        strokeColor: '#80d8ff'
      });
      break;
    }
  }
}

// 修改事件监听逻辑
onMounted(() => {
  const radios = document.getElementsByName('func');
  for (let i = 0; i < radios.length; i++) {
    radios[i].addEventListener('change', function(e) {
      draw(e.target.value);
    });
  }
});

function clean() {
  if (map) {
    map.value.remove(data.overlays);
    data.overlays = [];
  }
}

function close() {
  if (mouseTool) {
    mouseTool.close(true);
    const radios = document.getElementsByName('func');
    for (let i = 0; i < radios.length; i++) {
      radios[i].checked = false;
    }
  }
}

</script>

<style scoped>
#container {
  width: 80%;
  height: 680px;
}
</style>
